<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件描述</title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			欢迎{{name}}
			<!--
			
			-->
			<a href="https://www.baidu.com" @click.prevent="event1" >点击阻止跳转</a>
			<div @click="event2">
				<button @click.stop="event2" >阻止冒泡</button>
			</div>
			<!--单次触发-->
			<button @click.once="event2" >只触发一次</button>
			<!--捕获模式
			
			事件机制分为捕获和冒泡两个阶段
			
			捕获阶段，从外到内
			冒泡阶段，从内到外 触发事件
			
			以下面的例子，如果不加captrue，那么触发的顺序是box2 box1
			如果增加了captrue，就会在增加的那个事件上捕获阶段处理事件
			下面，由于捕获阶段是box1 box2，所以box1会优先触发，然后是
			冒泡阶段，box2再触发，由于box1已经在捕获阶段触发完成，所以不触发
			最后的效果就是 box1 box2
			-->
			<div @click.capture="event2" class="box1">
				<button @click="event2" class="box2" >阻止冒泡</button>
			</div>
			<!--
			self模式下，只有是当前元素触发了事件后，才可以触发事件
			如果你只是点击了box2，box1的事件也会触发，但是那是冒泡触发，而非
			直接点击box1自身来触发。所以box1并不会触发，也算是另一种意义上的
			阻止冒泡
			-->
			<div @click.self="event2" class="box1">
				<button @click="event2" class="box2" >阻止冒泡</button>
			</div>
			
			<!--passive 模式下，
			例如当前ul是有滚轮的，同时你也定了滚轮事件
			原本的逻辑将会
			先处理的滚轮事件，处理完后再滚动。当你的滚轮事件需要处理很繁杂的事情的时候，
			事件所花费的时间会长，这样会造成长时间才能响应的效果。
			passvie的出现，将会直接执行滚动，而不会等待滚轮事件执行玩
			
			scroll 当进度条移动的时候，才会触发事件，同时，当进度条到上下边界，将不会触发
			wheel当鼠标滚轮滚动的时候会触发事件，即便是到了上下边界，只要还在滚动，依旧会触发函数
			-->
			<ul @scroll="event3" @wheel="event3" >
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
		</div>
	</body>
	
	<script type="text/javascript">
			Vue.config.productionTip=false;
			//函数定义数据
			let vm = new Vue({
				el:'#root',
				// 函数式
				data:{
					name:"123"
				},
				methods:{
					event1(e){
						// e.defaultPrevented();
						// 阻止默认行为，这里用在a标签上，就是跳转
						alert("123");
					},
					event2(e){
						// e.stopPropagation 停止传播，也就是停止冒泡传播
						alert("456");
					},
					event3(number,e){
						console.log(number,e);
						alert(number,e);
					}
				}
			})
	</script>
</html>
